<template>
  <div class="booklist">
    <PageHeader
      :title="query.classify"
      :pageUrl="'/pages/classification/classification'"
    ></PageHeader>
    <scroll-view
      class="booklist-content"
      scroll-y="true"
      @scrolltolower="scrollGet"
    >
      <template v-for="item in pageList" :key="item.id">
        <BooksItem :item="item"></BooksItem>
      </template>
    </scroll-view>
  </div>
</template>
<route>
{
  "layout": "noTabr",
}
</route>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import request from "@/utils/request";
const query = reactive({
  classify: "",
  page: 1,
  pageSize: 20,
  desc: ["id"],
  sourceSite: "",
});
const pageList = ref([]);

// 请求数据
const getList = async () => {
  const result = await request({
    url: `novel/category/${query.classify}/${query.page}`,
  });
  console.log(result, "result");
  if (result.length === 0) {
    uni.showToast({
      title: "没有更多数据了",
      icon: "none",
    });
    return;
  }
  pageList.value = [...pageList.value, ...result];
};
const scrollGet = () => {
  query.page++;
  getList();
};

onLoad((res) => {
  query.classify = res?.type;
  getList();
});
</script>

<style lang="scss" scoped>
.booklist {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  //overflow: hidden;
}

.booklist-content {
  flex: 1;
  //background: #f00f00;
  width: 100%;
  //height: 200rpx;
  overflow-y: auto;
}
</style>
